<template>
  <view class="container">
    <uv-navbar title="推广中心" bg-color="transparent" left-icon-color="#fff"
      :titleStyle="{color: '#fff','font-size': '36rpx','font-weight':'bold'}" autoBack></uv-navbar>
    <image class="main_bg" src="/static/deatils/order_bg.png" mode="widthFix"></image>
    <view class="main">
      <view class="main_title">
        线下活动标题
      </view>
      <view class="main_user">
        <view>
          张三
        </view>
        <text>18698740000</text>
      </view>
      <view class="main_price">
        <div><text>￥</text>199.00</div>
        <button class="flex-center">有效票</button>
      </view>
      <view class="main_footer">
        <view class="footer_title">
          票号：12345678910
        </view>
        <uv-qrcode ref="qrcode" size="378rpx" value="https://h5.uvui.cn"></uv-qrcode>
        <view class="footer_content">
          <image src="/static/deatils/zhongbiao.png" mode="widthFix"></image>
          <text>2020-09-14 14:00 ~ 2020-09-15 18:00</text>
        </view>
        <view class="footer_content">
          <image src="/static/deatils/dizhi.png" mode="widthFix"></image>
          <text>陕西省西安市莲湖区大兴路A座3单元2002室</text>
        </view>
        <view class="footer_copy">
          复制地址
        </view>
      </view>
    </view>
    <view class="footer">
      <view class="footer_head">
        温馨提示
      </view>
      <view class="footer_des">
        1.请勿把票券随意分享给他人
      </view>
      <view class="footer_des">
        2.入场时请提前打开电子票，调亮屏幕，扫描二维码检票入场 1人1票
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">

</script>

<style lang="less" scoped>
  .container {
    width: 750rpx;
    height: 1334rpx;
    background: #228CFE;
    position: relative;

    .main {
      width: 654rpx;
      height: 960rpx;
      position: relative;
      left: 0;
      right: 0;
      margin: auto;
      top: 120rpx;
      z-index: 9;
      font-size: 30rpx;
      padding: 30rpx 22rpx;
      box-sizing: border-box;
      color: #333333;

      &_title {
        font-weight: bold;
      }

      &_user {
        display: flex;
        margin: 40rpx 0 20rpx;

        view {
          margin-right: 45rpx;
        }
      }

      &_price {
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: space-between;

        text {
          font-size: 24rpx;
        }

        button {
          background-color: transparent;
          width: 124rpx;
          height: 54rpx;
          border-radius: 27rpx;
          border: 1px solid #228CFE;
          color: #228CFE;
          font-size: 30rpx;
          white-space: nowrap;
          padding: 0;
          font-weight: 500;
          margin: 0;
        }
      }

      &_footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 80rpx;

        .footer_title {
          font-weight: 500;
          font-size: 28rpx;
          color: #666666;
          margin-bottom: 20rpx;
        }

        :deep(.uqrcode) {
          margin-bottom: 35rpx;
        }

        .footer_content {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          image {
            width: 40rpx;
            height: 40rpx;
            margin-right: 5rpx;
          }

          font-weight: 500;
          font-size: 28rpx;
          color: #666666;
          margin-bottom: 20rpx;
        }

        .footer_copy {
          width: 100%;
          display: flex;
          justify-content: flex-end;
          font-size: 24rpx;
          color: #228CFE;
          padding-right: 15rpx;
          box-sizing: border-box;

          &:active {
            color: rgba(#228CFE, .7);
          }
        }
      }
    }

    .footer {
      position: relative;
      font-size: 28rpx;
      color: #FFFFFF;
      padding: 0 48rpx;
      box-sizing: border-box;
      top: 140rpx;
      &_head {
        font-weight: bold;
        margin-bottom: 10rpx;
      }
      &_des {
        font-size: 24rpx;
        margin-bottom: 15rpx;
      }
    }

    .main_bg {
      width: 654rpx;
      height: 960rpx;
      position: absolute;
      z-index: 1;
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      top: 120rpx;
    }
  }
</style>